import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/login/index.vue'),
  },
  {
    path: '/',
    name: 'Main',
    component: () => import('../views/Main.vue'),
    redirect: '/home',
    children: [],
  },
  {
    path: '/404',
    component: () => import('../views/404/index.vue'),
  },
]
/* 
vue中，如果跳转同一个页面路由，虽不会影响功能，但是会报错

原因：路由的push会向历史记录栈中添加一个记录，同时跳转同一个路由页面，会造成一个重复的添加，导致页面的报错

解决方案：在router的index.js中重写vue的路由跳转push
*/
//1. 先把 VueRouter 原型对象的push/replace，保存一份
let originPush = VueRouter.prototype.push
let originReplace = VueRouter.prototype.replace

//2. 重写push/replace
// 参数：1.告诉原来的push方法，往哪里跳转（传递哪些参数） 2.成功回调 3.失败回调
VueRouter.prototype.push = function (location, resolve, reject) {
  if (resolve && reject) {
    // call和apply区别
    // 相同：都可以调用函数一次，篡改函数上下文一次（this指向）
    // 不同点：call传递参数用逗号隔开，apply方法执行，传递数组
    // 不管你点多少次，每次就覆盖之前的，相当于传了一次一模一样的路径
    originPush.call(this, location, resolve, reject)
  } else {
    originPush.call(
      this,
      location,
      () => {},
      () => {}
    )
  }
}
VueRouter.prototype.replace = function (location, resolve, reject) {
  if (resolve && reject) {
    originReplace.call(this, location, resolve, reject)
  } else {
    originReplace.call(
      this,
      location,
      () => {},
      () => {}
    )
  }
}
const router = new VueRouter({
  // mode: 'hash',
  routes,
})

export default router
